import "./index.css";
import React from "react";
// 第一种方式 使用interface定义props
interface Props {
  title?: string;
  children?: React.ReactNode;
  cb?: (params: string) => void;
}
// 第二种方式 React.FC函数组件方式定义props

// Partial将Props中的所有属性变为可选的
const defaultProps: Partial<Props> = {
  title: "默认标题"
};

const Card: React.FC<Props> = (props) => {
  // ------------------------------
  // 1.创建自定义事件---原生浏览器支持
  const event = new Event("on-test"); //随便写，和原生事件不要重复
  const clickTap = () => {
    event.customObj = { name: "自定义事件对象" };
    window.dispatchEvent(event);
  };
  // -------------------------------
  const { title, children, cb } = { ...defaultProps, ...props };
  return (
    <div className="card">
      <header>
        <div>{title}</div>
        <div>副标题</div>
      </header>
      <main>{children}</main>
      <footer>
        {/* 2.触发自定义事件 */}
        <button onClick={clickTap}>自定义事件</button>
        <button onClick={() => window.onShow()}>确认</button>
        {/* 子传父通过父组件传过来的回调函数去传值 */}
        <button onClick={() => cb && cb("取消了")}>取消</button>
      </footer>
    </div>
  );
};

export default Card;

//扩充event类型
declare global {
  interface Event {
    customObj: { name: string };
  }
}
